<template>
  <!-- 商品分析 -->
  <div class="goods_wrap">
    <div class="top_wrap">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '32px' }"
      >
        <el-table-column prop="quarter" label="季度"> </el-table-column>
        <el-table-column prop="sellNumber" label="销售数量"> </el-table-column>
        <el-table-column prop="numberRatio" label="数量占比"> </el-table-column>
        <el-table-column prop="sellMoney" label="销售金额"> </el-table-column>
        <el-table-column prop="moneyRatio" label="金额占比"> </el-table-column>
      </el-table>
    </div>
    <div class="bottom_wrap">
      <div class="active_title">
        <span v-if="!tableData.length">暂无数据</span>
      </div>
      <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
    </div>
  </div>
</template>

<script>
import { commodityAnalysis } from '@/request/store/K_KPIAnalysis'
import { deepClone } from '@/util/util'
export default {
  data() {
    return {
      tableData: [],
      option: {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          name: '金额',
          type: 'value'
        },
        series: [
          {
            barWidth: 150,
            type: 'bar',
            data: [],
            name: '金额',
            color: '#1d80fc'
          }
        ]
      }
    }
  },
  created() {
    this.commodityAnalysis()
  },
  mounted() {
    this.createEchart()
  },
  methods: {
    createEchart() {
      // // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(this.option)
    },
    async commodityAnalysis() {
      const { data } = await commodityAnalysis()
      if (data && data.code === 200) {
        this.tableData = data.data
        this.setOption()
      }
    },
    // 设置图表
    setOption() {
      let option = deepClone(this.option)
      let tempDataList = deepClone(this.tableData)
      for (let i = 0; i < tempDataList.length; i++) {
        option.xAxis.data.push(tempDataList[i].quarter)
        option.series[0].data[i] = tempDataList[i].sellMoney
        this.option = option
        this.createEchart()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.goods_wrap {
  background-color: #fff;
  margin-top: 16px;
  .top_wrap {
    height: 350px;
    overflow-y: scroll;
    // background-color: #8a8a8a;
  }
  .bottom_wrap {
    margin-top: 20px;
    height: 350px;
    span {
      margin-left: 120px;
      font-size: 14px;
      color: #8a8a8a;
    }
    .active_title {
      position: absolute;
      margin: 0 auto;
      text-align: center;
      left: 40.5%;
      top: 70%;
      color: #8a8a8a;
    }
    // background-color: cornflowerblue;
  }
}
</style>
